{extend name="public:adminbase" /}

{block name="content"}



<!--风格切换-->
<link rel="stylesheet" href="{:config('web.cdn')}/static/ztree/css/metroStyle/metroStyle.css" type="text/css">

<!--<link rel="stylesheet" href="{:config('web.cdn')}/static/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">-->

<style type="text/css">
  div#rMenu {
    position: absolute;
    visibility: hidden;
    top: 0;
    background-color: #000;
    text-align: left;
    padding: 10px;
  }
  div#rMenu ul li{
    margin: 1px 0;
    padding: 0 5px;
    cursor: pointer;
    list-style: none outside none;
    background-color: #000;
    color: #fff;
    font-size: 15px;
  }
</style>
<div class="container-fluid p-t-15">
  
  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-header"><h4>菜单管理</h4></div>
        <div class="card-body">
          <span class="label label-outline-default " style="color: red">
            鼠标右键点击相应的菜单，即可对该菜单进行增删改查等操作
          </span>

          <ul id="treeDemo" class="ztree"></ul>

          <div id="rMenu">
            <ul>
              <li  onclick="addTreeNode('add');">添加子菜单</li>
              <li  onclick="addTreeNode('edit');">修改菜单</li>
              <li id="m_del" onclick="removeTreeNode();">删除当前菜单</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</div>


<script type="text/javascript" src="{:config('web.cdn')}/static/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="{:config('web.cdn')}/static/ztree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="{:config('web.cdn')}/static/ztree/js/jquery.ztree.exedit.js"></script>
<SCRIPT LANGUAGE="JavaScript">
    var setting = {
        view: {
            dblClickExpand: false
        },
        check: {
            enable: true
        },
        callback: {
            onRightClick: OnRightClick
        }
    };
    var zNodes = {};
    var url = "{:url('getmenus')}";


    $.ajaxSettings.async = false; //关闭异步
    $.post(url,{},function (e) {
        zNodes = e;
    })

    setting.check.chkboxType = { "Y" : "ps", "N" : "s" };

    function OnRightClick(event, treeId, treeNode) {
        if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
            zTree.cancelSelectedNode();
            showRMenu("root", event.clientX, event.clientY);
        } else if (treeNode && !treeNode.noR) {
            zTree.selectNode(treeNode);
            showRMenu("node", event.clientX, event.clientY);
        }
    }

    function showRMenu(type, x, y) {
        $("#rMenu ul").show();
        if (type=="root") {
            $("#m_del").hide();
            $("#m_check").hide();
            $("#m_unCheck").hide();
        } else {
            $("#m_del").show();
            $("#m_check").show();
            $("#m_unCheck").show();
        }

        y += document.body.scrollTop;
        x += document.body.scrollLeft -225;


        rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

        $("body").bind("mousedown", onBodyMouseDown);
    }
    function hideRMenu() {
        if (rMenu) rMenu.css({"visibility": "hidden"});
        $("body").unbind("mousedown", onBodyMouseDown);
    }
    function onBodyMouseDown(event){
        if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
            rMenu.css({"visibility" : "hidden"});
        }
    }
    var addCount = 1;
    function addTreeNode(type) {
        /**
         原版

        var newNode = { name:"增加" + (addCount++)};
        if (zTree.getSelectedNodes()[0]) {
            newNode.checked = zTree.getSelectedNodes()[0].checked;
            zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
        } else {
            zTree.addNodes(null, newNode);
        }
         **/
        var nodes = zTree.getSelectedNodes();
        console.log(nodes);
        hideRMenu();
        layer.open({
            type: 2,
            title: '添加子菜单',
            shadeClose: true,
            shade: 0.8,
            area: ['380px', '90%'],
            content: "{:url('AdminRbac/addnode')}?pid="+nodes[0].id+"&type="+type //iframe的url
        });
    }
    function removeTreeNode() {
        hideRMenu();
        var nodes = zTree.getSelectedNodes();

        layer.confirm('您确定要删除这条信息么？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            var url = "{:url('AdminRbac/del')}";
            $.post(url,nodes[0],function (e) {
                if(e.code == 200){
                    success("成功");

                    if (nodes && nodes.length>0) {
                        if (nodes[0].children && nodes[0].children.length > 0) {
                            zTree.removeNode(nodes[0]);
                        } else {
                            zTree.removeNode(nodes[0]);
                        }
                    }

                }else {
                    error("失败");
                }
            })
        }, function(){
            layer.msg('已取消');
        });

    }
    function checkTreeNode(checked) {
        var nodes = zTree.getSelectedNodes();
        if (nodes && nodes.length>0) {
            zTree.checkNode(nodes[0], checked, true);
        }
        hideRMenu();
    }
    function resetTree() {
        hideRMenu();
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    }

    var zTree, rMenu;
    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        zTree = $.fn.zTree.getZTreeObj("treeDemo");
        rMenu = $("#rMenu");
    });
</SCRIPT>

{/block}